<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>折线图的实现</title>
</head>

<body>
  <!-- 折线图 常见效果
    最大值最小值平均值---markPoint/markLine/markArea
    线条显示 smooth lineStyle
    填充风格 areaStyle
    紧挨边缘 boundaryGap （放在xAxis）
    脱离0值比例 scale (放在yAxis)
    堆叠图 stack
-->
  <!-- 折线图特点--折线图常用来分析数据随时间的变化趋势 -->


  <div style="width: 600px;height: 400px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
    var yDataArr2 = [2000, 800, 1100, 1400, 200, 70, 140, 130, 1800, 1300, 890, 1600];

    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        //紧挨边缘
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        // 脱离0值比例
        scale: true
      },
      series: [{
        name: '康师傅方便面每月销售量',
        type: 'line',
        data: yDataArr,
        markPoint: {
          data: [{
            type: 'max',
            name: '最大值'
          }, {
            type: 'min',
            name: '最小值'
          }]
        },
        markLine: {
          data: [{
            type: 'average',
            name: '平均值'
          }]
        },
        markArea: {
          data: [
            [{
              xAxis: '1月'
            }, {
              xAxis: '2月'
            }],
            [{
              xAxis: '9月'
            }, {
              xAxis: '10月'
            }]
          ]
        },
        smooth: true,
        lineStyle: {
          color: 'red',
          // 线条样式
          type: 'dotted'
            // dashed/solid/dotted
        },
        areaStyle: {
          // 填充风格
          color: '#becaf0'
        },
        stack: 'all'
      }, {
        name: '统一方便面',
        type: 'line',
        data: yDataArr2,
        // 堆叠图
        stack: 'all',
        areaStyle: {
          color: 'red'
        },
        smooth: true
      }]
    };
    mChart.setOption(option);
  </script>
</body>

</html>